<template>
  <div>
    <div class="container">
      <swiper class="swiper" :options="swiperOption">
        <swiper-slide v-for="(item, index) of sList1" :key="index" class="item">
          <img v-lazy="item.sImg" alt="">
        </swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
      </swiper>
      <swiper class="swiper2" :options="swiperOptions2">
        <swiper-slide class="item">
          <img src="/imgs/banner-1.png" alt="">
        </swiper-slide>
        <swiper-slide class="item">
          <img src="/imgs/banner-1.png" alt="">
        </swiper-slide>
      </swiper>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Index-Banner',
  data () {
    return {
      swiperOption: {
        slidesPerView: 4,
        spaceBetween: 10,
        autoplay: true,
        loop: false
      },
      swiperOptions2: {},
      sList1: [
        {
          id: 1,
          sImg: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c0c05274f2fbb55fbccb89622f798907.jpg?w=632&h=340'
        },
        {
          id: 2,
          sImg: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/3ca70ef337bf7c6d93aef6b59917bf6b.jpg?w=632&h=340'
        },
        {
          id: 3,
          sImg: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/816a66edef10673b4768128b41804cae.jpg?w=632&h=340'
        },
        {
          id: 4,
          sImg: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c0c05274f2fbb55fbccb89622f798907.jpg?w=632&h=340'
        },
        {
          id: 5,
          sImg: 'https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c0c05274f2fbb55fbccb89622f798907.jpg?w=632&h=340'
        }
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
@import "../../assets/css/mixin";

@include container();

.swiper {
  height: 167px;
  margin-top: 20px;
  width: 1226px;

  .item {
    img {
      width: 100%;
      height: 100%;

      &:hover {
        cursor: pointer;
      }
    }
  }
}

.swiper2 {
  height: 130px;
  margin-top: 30px;

  .item {
    img {
      width: 1226px;
      height: 130px;

      &:hover {
        cursor: pointer;
      }
    }
  }
}
</style>
